<template>
	<view class="date-picker">
		<view class="picker">
			<view class="date space-between">
				<view class="" @click="openDate('star')">{{starDate}}</view>
				<view class="line">一</view>
				<view class="" @click="openDate('end')">{{endDate}}</view>
			</view>
			<view class="icon row">
				<view class="ipic">
					<image :src="$utils.isBaseUrl('date.png')" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 时间选择 -->
		<public-picker @confirm="confirm" confirm-text="确定" v-model="show" mode="time"
			:default-time="defaultTime" :params="params">
		</public-picker>
	</view>
</template>

<script>
	export default {
		name:"date-picker",
		data() {
			return {
				starDate: '开始时间',
				endDate: '结束时间',
				choseType: false,
				// 家乡选择
				show: false,
				// 默认地址
				defaultTime: '',
				// 如果params值如下(地区选择模式)：
				params: {
					year: false,
					month: true,
					day: true
				},
			};
		},
		methods: {
			openDate(open) {
				this.show = true
				if (open == 'end') {
					this.choseType = true
				} else {
					this.choseType = false
				}
			},
			// 日期确认
			confirm(e) {
				if (this.choseType) {
					this.endDate = e.month + ':' + e.day
					this.$emit('custom')
				} else {
					this.starDate = e.month + ':' + e.day
				}
			},
		}
	}
</script>

<style lang="scss">
	.date-picker {
		margin-bottom: 20rpx;
		.picker {
			padding: 15rpx 0 22rpx;
			display: flex;
			background-color: #FDFDFD;
			border-radius: 5rpx;
			color: #8B8989;
			font-size: 28rpx;
			.date {
				flex: 5;
				padding: 0 80rpx;
				
				.line {
					font-size: 33rpx;
					font-weight: bold;
				}
			}
			.icon {
				flex: 1;
				.ipic {
					width: 30rpx;
					height: 30rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>